<template>
   <div class="loginReg">
      <div class=" mui-row clearfix">
          <div class="login mui-col-xs-3">
          <a href="#">登陆</a>
        </div>
        <div class="register mui-col-xs-3">
          <a href="#">注册</a>
        </div>
        <div ref="backTop" @click="backTop" class="bakcTop mui-col-xs-6">
          <a href="javascript:void(0)">
            <span>返回顶部</span>
          </a>
        </div>
      </div>
      <p>
        <a href="#">手机APP下载</a>
        <span>慢慢买手机版</span>
        <span>--掌上比价平台</span>
      </p>
      <p>m.manmanbuy.com</p>
    </div>
</template>
<script>
export default {
  mounted() {
    document.documentElement.scrollTop = 0;
  },
  methods: {
    backTop() {
      // console.dir(this.$refs.backTop.offsetTop)
      // console.log(document.documentElement.scrollTop)
      // var sT = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
      // document.documentElement.style.transition = "all 0.6s"
      // console.log(document.documentElement)
      // console.log(window)
      this.animate(document.documentElement,{
        scrollTop : 0
      })
      // return false
    },
    animate(obj, set, callback) {
        if (obj.timerId) {
            clearInterval(obj.timerId);
        }
        obj.timerId = setInterval(function () {
            //我这个定时器,执行的再快,也会执行for遍历,即对象里面的属性都会改变
            //每次这几个属性都会改变,所以要写定时器在外面
            for (var key in set) {
                var attr = key;
                var target = set[key];
                var flag = true;
                //获取元素样式
                var current = parseInt(document.documentElement.scrollTop);
                //累加小碎步
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                //赋值
                document.documentElement.scrollTop = current ;
                if (current != target) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(obj.timerId);
                callback && callback();
            }
        }, 20);
      }
  }
}
</script>
<style lang="less" scoped>
@import '../../less/var';
  .loginReg {
    font-size: 24/@base;
    text-align: center;
    div {
      border: 1px solid #ccc;
      height: 64/@base;
      line-height: 64/@base;
      a {
        color: #000;
      }
    }
    div.bakcTop {
      span {
        background: url('../../images/top.jpg') no-repeat left center;
        background-size: 28/@base 28/@base ;
        padding-left: 30/@base;
        vertical-align: bottom;
      }
    }
    p {
      font-size: 22/@base;
      margin-top: 20/@base;
      a {
        color: red;
      }
    }
  }
</style>
